<template>
  <div class="sample">
    <el-table ref="multipleSampleTable" :data="tableData" highlight-current-row height="100%" style="width: 100%;height:100%;" @select="onTableSelect" @selection-change="sampleChecked" :header-cell-style="{padding:'0px',background: '#524540'}" :cell-style="{padding:'1px'}" :row-style="TableRowStyle">
      <el-table-column type="selection" width="45" fixed="left">
      </el-table-column>
      <el-table-column prop="sampleid" label="Sample" width="80">
        <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <el-table-column prop="pi" label="PI" width="60">
      </el-table-column>
      <el-table-column prop="count" label="Count" width="80">
      </el-table-column>
      <el-table-column prop="region" label="Region" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from 'axios'
import { globalBus } from './globalBus';
export default {
  props: {
    'ModelName': {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: new Array(),
      page: 0,
      pagesize: 20,
      allsample: null,
      selectedSample: new Array()
    }
  },
  created() {
    this.selectSample();
  },
  mounted() {

    let tableBodyDom = this.$refs.multipleSampleTable.bodyWrapper;
    // debugger
    tableBodyDom.addEventListener('scroll', () => {
      // 滚动距离
      let scrollTop = tableBodyDom.scrollTop

      // console.log('scrollTop',scrollTop)
      // 变量windowHeight是可视区的高度
      let windowHeight = tableBodyDom.clientHeight || tableBodyDom.clientHeight
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight = tableBodyDom.scrollHeight || tableBodyDom.scrollHeight
      if (scrollTop + windowHeight === scrollHeight) {
        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
        // if (!this.allData) this.getMoreLog()
        console.log('scrollTop', scrollTop + 'windowHeight', windowHeight + 'scrollHeight', scrollHeight)
        this.page = this.page + 1;
        console.log(this.page * this.pagesize, this.allsample.length)
        if (this.page * this.pagesize < this.allsample.length) {
          // debugger
          console.log("page++=", this.page)
          this.getDeleteData(0);
          this.getMoreData(1);
          tableBodyDom.scrollTop = 1
        } else {
          this.page = this.page - 1;
        }

      } else
      if (scrollTop === 0) {
        this.page = this.page - 1;
        if (this.page >= 0) {
          console.log("page--")
          // debugger
          this.getDeleteData(1);
          this.getMoreData(0);
          tableBodyDom.scrollTop = tableBodyDom.scrollTop + 100
        }
      }
    })

  },
  methods: {
    TableRowStyle({ row, rowIndex }) {
      let rowBackground = {};
      if (row) {
        rowBackground.background = "#524540";
        return rowBackground;
      }
    },
    selectUser() {

      let name = this.keywords;
      axios.post('api/user/selectUser', {
        name
      }).then(res => {
        this.tableData = res
        //debugger 
        // let data = res.data[0];
        // this.userName = data.name;
        // this.age = data.age
      }).catch(err => {
        console.log(err)
      })
    },
    getMoreData(toporbottom) {
      if (toporbottom === 1) {
        var start = this.page * this.pagesize;
        var end = this.pagesize + this.page * this.pagesize;
        if (end > this.allsample.length) {
          start = this.allsample.length - 20;
          end = this.allsample.length;
        }
        for (var i = start; i < end; i++) {
          var row=this.allsample[i];
          this.tableData.push(row);
          var index = this.selectedSample.indexOf(row.sampleid);
          console.log(index)
          if (index > -1) {
              this.$refs.multipleSampleTable.toggleRowSelection(row, true);
              // this.onTableSelect(this.tableData, row);
          }
        }
      } else {
        var j = 0;
        for (var i = (this.page) * this.pagesize; i < this.pagesize + (this.page) * this.pagesize && i < this.allsample.length; i++) {
          var row=this.allsample[i];
          this.tableData.splice(j, 0, row);
          j++
          var index = this.selectedSample.indexOf(row.sampleid);
          console.log(index)
          if (index > -1) {
              this.$refs.multipleSampleTable.toggleRowSelection(row, true);
              // this.onTableSelect(this.tableData, row);
          }
        }
      }
    },
    getDeleteData(toporbottom) {
      if (toporbottom === 0)
        this.tableData.splice(0, 20)
      else {
        this.tableData.splice(0, 20)
      }

    },
    selectSample() {
      console.log(this._props['ModelName'])
      let queryParam=this.$route.query;


      // var params0 = url.parse(req.url, true).query;
      // if(params0.sample_id==null){
      //   params0.sample_id='';
      let name = this.keywords;
      axios.get('api/user/selectSample?sample_id='+queryParam.sample_id, {
        name
      }).then(res => {
        var sampledata=new Array()
        for(var j=0;j<res.data.length; j++)
        {
          if(res.data[j].species==this._props['ModelName']){
            sampledata.push(res.data[j]);
          }
        }
        this.allsample = sampledata;

        for (var i = this.page; i < this.pagesize + this.page * this.pagesize && i < sampledata.length; i++) {
          console.log(i)
          if(sampledata[i].species==this._props['ModelName']){
            this.tableData.push(sampledata[i]);
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },


    sampleChecked(samples) {
      for (let item of samples) {}
    },
    onTableSelect(rows, row) {
      let selected = rows.length && rows.indexOf(row) !== -1
      console.log(selected) // true就是选中，0或者false是取消选中
      console.log(row.sampleid)
// debugger
      if (selected) {
        var index = this.selectedSample.indexOf(row.sampleid);
        if (index == -1)
          this.selectedSample.push(row.sampleid);
        globalBus.$emit('getNeuronformSampleID', row.sampleid);
      } else {
        var index = this.selectedSample.indexOf(row.sampleid);
        if (index > -1)
          this.selectedSample.splice(index, 1);
        globalBus.$emit('removeNeuronformSampleID', row.sampleid);
      }
    }

  }

}

</script>
<style scoped>
div {

  height: 30%;

  background: #524540;
  color: #ffffff;
}
/deep/ .el-table tbody tr:hover>td { background-color: #888888 }
/deep/ .el-table__body tr.current-row>td {
  color: #fff;
  background: #409EFF!important;
}
</style>
